<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>DeviceOrientation Event Specification</title>
  <meta content="ED" name="w3c-status">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
<style>
    body {
      background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
      background-attachment: fixed;
    }
  </style>
  <link href="http://www.w3.org/TR/orientation-event/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">DeviceOrientation Event Specification</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://w3c.github.io/deviceorientation/">https://w3c.github.io/deviceorientation/</a>
     <dt>Latest published version:
     <dd><a href="http://www.w3.org/TR/orientation-event/">http://www.w3.org/TR/orientation-event/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2017/NOTE-orientation-event-20170530/" rel="prev">https://www.w3.org/TR/2017/NOTE-orientation-event-20170530/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-device-apis@w3.org?subject=%5Borientation-event%5D%20YOUR%20TOPIC%20HERE">public-device-apis@w3.org</a> with subject line “<kbd>[orientation-event] <i data-lt>… message topic …</i></kbd>” (<a href="https://lists.w3.org/Archives/Public/public-device-apis/" rel="discussion">archives</a>)</span>
     <dd><a href="https://github.com/w3c/deviceorientation">GitHub w3c/deviceorientation</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Devices and Sensors Working Group</span>
     <dt class="editor">Former Editors:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Rich Tibbett</span> (<span class="p-org org">Opera Software ASA</span>)
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Tim Volodine</span> (<span class="p-org org">Google Inc</span>)
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Steve Block</span> (<span class="p-org org">Google Inc until July 2012</span>)
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Andrei Popescu</span> (<span class="p-org org">Google Inc until July 2012</span>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines several new DOM events that provide information about the physical orientation and motion of a hosting device.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> If you wish to make comments regarding this document, please send them to <a href="mailto:public-device-apis@w3.org?Subject=%5Borientation-event%5D%20PUT%20SUBJECT%20HERE">public-device-apis@w3.org</a> (<a href="mailto:public-device-apis-request@w3.org?subject=subscribe">subscribe</a>, <a href="https://lists.w3.org/Archives/Public/public-device-apis/">archives</a>).
	When sending e-mail,
	please put the text “orientation-event” in the subject,
	preferably like this:
	“[orientation-event] <em>…summary of comment…</em>”.
	All comments are welcome. </p>
   <p> This document was produced by the <a href="https://www.w3.org/das/">Devices and Sensors Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/43696/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#conformance-requirements"><span class="secno">1</span> <span class="content">Conformance requirements</span></a>
    <li><a href="#introduction"><span class="secno">2</span> <span class="content">Introduction</span></a>
    <li><a href="#scope"><span class="secno">3</span> <span class="content">Scope</span></a>
    <li>
     <a href="#description"><span class="secno">4</span> <span class="content">Description</span></a>
     <ol class="toc">
      <li><a href="#deviceorientation"><span class="secno">4.1</span> <span class="content">deviceorientation Event</span></a>
      <li><a href="#deviceorientationabsolute"><span class="secno">4.2</span> <span class="content">deviceorientationabsolute Event</span></a>
      <li><a href="#compassneedscalibration"><span class="secno">4.3</span> <span class="content">compassneedscalibration Event</span></a>
      <li><a href="#devicemotion"><span class="secno">4.4</span> <span class="content">devicemotion Event</span></a>
      <li><a href="#id=permission-model"><span class="secno">4.5</span> <span class="content">Permission model</span></a>
     </ol>
    <li><a href="#security-and-privacy"><span class="secno">5</span> <span class="content">Security and privacy considerations</span></a>
    <li>
     <a href="#use-cases-and-requirements"><span class="secno">6</span> <span class="content">Use-Cases and Requirements</span></a>
     <ol class="toc">
      <li><a href="#use-cases"><span class="secno">6.1</span> <span class="content">Use-Cases</span></a>
      <li><a href="#requirements"><span class="secno">6.2</span> <span class="content">Requirements</span></a>
     </ol>
    <li>
     <a href="#examples"><span class="secno"></span> <span class="content">A Examples</span></a>
     <ol class="toc">
      <li><a href="#worked-example"><span class="secno"></span> <span class="content">A.1 Calculating compass heading</span></a>
      <li><a href="#worked-example-2"><span class="secno"></span> <span class="content">A.2 Alternate device orientation representations</span></a>
     </ol>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="conformance-requirements"><span class="secno">1. </span><span class="content">Conformance requirements</span><a class="self-link" href="#conformance-requirements"></a></h2>
   <p>All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.</p>
   <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119. For readability, these words do not appear in all uppercase letters in this specification. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
   <p>Requirements phrased in the imperative as part of algorithms (such as "strip any leading space characters" or "return false and abort these steps") are to be interpreted with the meaning of the key word ("must", "should", "may", etc) used in introducing the algorithm.</p>
   <p>Conformance requirements phrased as algorithms or specific steps may be implemented in any manner, so long as the end result is equivalent. (In particular, the algorithms defined in this specification are intended to be easy to follow, and not intended to be performant.)</p>
   <p>User agents may impose implementation-specific limits on otherwise unconstrained inputs, e.g. to prevent denial of service attacks, to guard against running out of memory, or to work around platform-specific limitations.</p>
   <p>Implementations that use ECMAScript to implement the APIs defined in this specification must implement them in a manner consistent with the ECMAScript Bindings defined in the Web IDL specification, as this specification uses that specification’s terminology. <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a></p>
   <p>The events introduced by this specification implement the Event interface defined in the DOM4 Specification, <a data-link-type="biblio" href="#biblio-dom4">[DOM4]</a>. Implementations must therefore support this specification.</p>
   <h2 class="heading settled" data-level="2" id="introduction"><span class="secno">2. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>This specification provides several new DOM events for obtaining information about the physical orientation and movement of the hosting device. The information provided by the events is not raw sensor data, but rather high-level data which is agnostic to the underlying source of information. Common sources of information include gyroscopes, compasses and accelerometers.</p>
   <p>The first DOM event provided by the specification, <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation">deviceorientation</a>, supplies the physical orientation of the device, expressed as a series of rotations from a local coordinate frame.</p>
   <p>The second DOM event provided by this specification, <a data-link-type="dfn" href="#def-devicemotion" id="ref-for-def-devicemotion">devicemotion</a>, supplies the acceleration of the device, expressed in Cartesian coordinates in a coordinate frame defined in the device. It also supplies the rotation rate of the device about a local coordinate frame. Where practically possible, the event should provide the acceleration of the device’s center of mass.</p>
   <p>Finally, the specification provides a <a data-link-type="dfn" href="#def-compassneedscalibration" id="ref-for-def-compassneedscalibration">compassneedscalibration</a> DOM event, which is used to inform Web sites that a compass being used to provide data for one of the above events is in need of calibration.</p>
   <p>The following code extracts illustrate basic use of the events.</p>
   <div class="example" id="example-7620a2e2">
    <a class="self-link" href="#example-7620a2e2"></a> Registering to receive <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation①">deviceorientation</a> events: 
<pre class="lang-js highlight">window<c- p>.</c->addEventListener<c- p>(</c-><c- u>"deviceorientation"</c-><c- p>,</c-> <c- a>function</c-><c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- c1>// process event.alpha, event.beta and event.gamma</c->
<c- p>},</c-> <c- kc>true</c-><c- p>);</c->
</pre>
   </div>
   <div class="example" id="example-f3190052">
    <a class="self-link" href="#example-f3190052"></a> A device lying flat on a horizontal surface with the top of the screen pointing West has the following orientation: 
<pre class="lang-json highlight"><c- p>{</c->alpha: 90,
 beta: 0,
 gamma: 0<c- p>}</c->;
</pre>
    <p>To get the compass heading, one would simply subtract <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha">alpha</a></code> from 360 degrees. As the device is turned on the horizontal surface, the compass heading is (360 - alpha).</p>
   </div>
   <div class="example" id="example-f560d6db"><a class="self-link" href="#example-f560d6db"></a> A user is holding the device in their hand, with the screen in a vertical plane and the top of the screen pointing upwards. The value of <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta">beta</a></code> is 90, irrespective of what <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha①">alpha</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma">gamma</a></code> are. </div>
   <div class="example" id="example-7f23e354">
    <a class="self-link" href="#example-7f23e354"></a> A user facing a compass heading of alpha degrees is holding the device in their hand, with the screen in a vertical plane and the top of the screen pointing to their right. The orientation of the device is: 
<pre class="lang-json highlight"><c- p>{</c->alpha: 270 - alpha,
 beta: 0,
 gamma: 90<c- p>}</c->;
</pre>
   </div>
   <div class="example" id="example-e96b4fed">
    <a class="self-link" href="#example-e96b4fed"></a> Showing custom UI to instruct the user to calibrate the compass: 
<pre class="lang-js highlight">window<c- p>.</c->addEventListener<c- p>(</c-><c- u>"compassneedscalibration"</c-><c- p>,</c-> <c- a>function</c-><c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    alert<c- p>(</c-><c- t>'Your compass needs calibrating! Wave your device in a figure-eight motion'</c-><c- p>);</c->
    event<c- p>.</c->preventDefault<c- p>();</c->
<c- p>},</c-> <c- kc>true</c-><c- p>);</c->
</pre>
   </div>
   <div class="example" id="example-76fffcaa">
    <a class="self-link" href="#example-76fffcaa"></a> Registering to receive <a data-link-type="dfn" href="#def-devicemotion" id="ref-for-def-devicemotion①">devicemotion</a> events: 
<pre class="lang-js highlight">window<c- p>.</c->addEventListener<c- p>(</c-><c- u>"devicemotion"</c-><c- p>,</c-> <c- a>function</c-><c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- c1>// Process event.acceleration, event.accelerationIncludingGravity,</c->
    <c- c1>// event.rotationRate and event.interval</c->
<c- p>},</c-> <c- kc>true</c-><c- p>);</c->
</pre>
   </div>
   <div class="example" id="example-0ab45ce3">
    <a class="self-link" href="#example-0ab45ce3"></a> A device lying flat on a horizontal surface with the screen upmost has an <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-acceleration" id="ref-for-dom-devicemotionevent-acceleration">acceleration</a></code> of zero and the following value for <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-accelerationincludinggravity" id="ref-for-dom-devicemotionevent-accelerationincludinggravity">accelerationIncludingGravity</a></code>: 
<pre class="lang-json highlight"><c- p>{</c->x: 0,
 y: 0,
 z: 9.81<c- p>}</c->;
</pre>
   </div>
   <div class="example" id="example-56241d7e">
    <a class="self-link" href="#example-56241d7e"></a> A device in free-fall, with the screen horizontal and upmost, has an <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-accelerationincludinggravity" id="ref-for-dom-devicemotionevent-accelerationincludinggravity①">accelerationIncludingGravity</a></code> of zero and the following value for acceleration: 
<pre class="lang-json highlight"><c- p>{</c->x: 0,
 y: 0,
 z: -9.81<c- p>}</c->;
</pre>
   </div>
   <div class="example" id="example-08216a06">
    <a class="self-link" href="#example-08216a06"></a> A device is mounted in a vehicle, with the screen in a vertical plane, the top uppermost and facing the rear of the vehicle. The vehicle is travelling at speed v around a right-hand bend of radius r. The device records a positive x component for both <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-acceleration" id="ref-for-dom-devicemotionevent-acceleration①">acceleration</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-accelerationincludinggravity" id="ref-for-dom-devicemotionevent-accelerationincludinggravity②">accelerationIncludingGravity</a></code>. The device also records a negative value for <code class="idl"><a class="idl-code" data-link-type="attribute" href="#dom-devicemotionevent-rotationrate" id="ref-for-dom-devicemotionevent-rotationrate">rotationRate</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-devicemotioneventrotationrate-gamma" id="ref-for-dom-devicemotioneventrotationrate-gamma">gamma</a></code>: 
<pre class="lang-json highlight"><c- p>{</c->acceleration: {x: v^2/r, y: 0, z: 0<c- p>}</c->,
 accelerationIncludingGravity: <c- p>{</c->x: v^2/r, y: 0, z: 9.81<c- p>}</c->,
 rotationRate: <c- p>{</c->alpha: 0, beta: 0, gamma: -v/r*180/pi<c- p>}</c-> };
</pre>
   </div>
   <h2 class="heading settled" data-level="3" id="scope"><span class="secno">3. </span><span class="content">Scope</span><a class="self-link" href="#scope"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>This specification is limited to providing DOM events for retrieving information describing the physical orientation and motion of the hosting device. The intended purpose of this API is to enable simple use cases such as those in <a href="#use-cases">Use-Cases</a> section. The scope of this specification does not include providing utilities to manipulate this data, such as transformation libraries. Nor does it include providing access to low sensor data, or direct control of these sensors.</p>
   <h2 class="heading settled" data-level="4" id="description"><span class="secno">4. </span><span class="content">Description</span><a class="self-link" href="#description"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="deviceorientation"><span class="secno">4.1. </span><span class="content">deviceorientation Event</span><a class="self-link" href="#deviceorientation"></a></h3>
   <p>User agents implementing this specification must provide a new DOM event, named <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="def-deviceorientation"><code>deviceorientation</code></dfn>. The corresponding event must be of type <code class="idl"><a data-link-type="idl" href="#deviceorientationevent" id="ref-for-deviceorientationevent">DeviceOrientationEvent</a></code> and must fire on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window">window</a></code> object. Registration for, and firing of the <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation②">deviceorientation</a> event must follow the usual behavior of DOM4 Events, <a data-link-type="biblio" href="#biblio-dom4">[DOM4]</a>.</p>
   <p>User agents must also provide an event handler IDL attribute <a data-link-type="biblio" href="#biblio-html">[HTML]</a> named <code class="idl"><a data-link-type="idl" href="#dom-window-ondeviceorientation" id="ref-for-dom-window-ondeviceorientation">ondeviceorientation</a></code> on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window①">window</a></code> object. The type of the corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type">event handler event type</a> must be <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation③">deviceorientation</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window"><c- g>Window</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext"><c- g>SecureContext</c-></a>] <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-ondeviceorientation"><code><c- g>ondeviceorientation</c-></code></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="deviceorientationevent"><code><c- g>DeviceOrientationEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
    <dfn class="idl-code" data-dfn-for="DeviceOrientationEvent" data-dfn-type="constructor" data-export data-lt="DeviceOrientationEvent(type, eventInitDict)|constructor(type, eventInitDict)|DeviceOrientationEvent(type)|constructor(type)" id="dom-deviceorientationevent-deviceorientationevent"><code><c- g>constructor</c-></code><a class="self-link" href="#dom-deviceorientationevent-deviceorientationevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="DeviceOrientationEvent/DeviceOrientationEvent(type, eventInitDict), DeviceOrientationEvent/constructor(type, eventInitDict), DeviceOrientationEvent/DeviceOrientationEvent(type), DeviceOrientationEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-deviceorientationevent-deviceorientationevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-deviceorientationevent-deviceorientationevent-type-eventinitdict-type"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-deviceorientationeventinit" id="ref-for-dictdef-deviceorientationeventinit"><c- n>DeviceOrientationEventInit</c-></a> <dfn class="idl-code" data-dfn-for="DeviceOrientationEvent/DeviceOrientationEvent(type, eventInitDict), DeviceOrientationEvent/constructor(type, eventInitDict), DeviceOrientationEvent/DeviceOrientationEvent(type), DeviceOrientationEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-deviceorientationevent-deviceorientationevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-deviceorientationevent-deviceorientationevent-type-eventinitdict-eventinitdict"></a></dfn> = {});
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceOrientationEvent" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-deviceorientationevent-alpha"><code><c- g>alpha</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceOrientationEvent" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-deviceorientationevent-beta"><code><c- g>beta</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceOrientationEvent" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-deviceorientationevent-gamma"><code><c- g>gamma</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceOrientationEvent" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-deviceorientationevent-absolute"><code><c- g>absolute</c-></code></dfn>;

    <c- b>static</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-permissionstate" id="ref-for-enumdef-permissionstate"><c- n>PermissionState</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceOrientationEvent" data-dfn-type="method" data-export data-lt="requestPermission()" id="dom-deviceorientationevent-requestpermission"><code><c- g>requestPermission</c-></code></dfn>();
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-deviceorientationeventinit"><code><c- g>DeviceOrientationEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceOrientationEventInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-deviceorientationeventinit-alpha"><code><c- g>alpha</c-></code><a class="self-link" href="#dom-deviceorientationeventinit-alpha"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceOrientationEventInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-deviceorientationeventinit-beta"><code><c- g>beta</c-></code><a class="self-link" href="#dom-deviceorientationeventinit-beta"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceOrientationEventInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-deviceorientationeventinit-gamma"><code><c- g>gamma</c-></code><a class="self-link" href="#dom-deviceorientationeventinit-gamma"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <dfn class="idl-code" data-default="false" data-dfn-for="DeviceOrientationEventInit" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-deviceorientationeventinit-absolute"><code><c- g>absolute</c-></code><a class="self-link" href="#dom-deviceorientationeventinit-absolute"></a></dfn> = <c- b>false</c->;
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-permissionstate"><code><c- g>PermissionState</c-></code></dfn> {
    <dfn class="idl-code" data-dfn-for="PermissionState" data-dfn-type="enum-value" data-export id="dom-permissionstate-granted"><code><c- s>"granted"</c-></code><a class="self-link" href="#dom-permissionstate-granted"></a></dfn>,
    <dfn class="idl-code" data-dfn-for="PermissionState" data-dfn-type="enum-value" data-export id="dom-permissionstate-denied"><code><c- s>"denied"</c-></code><a class="self-link" href="#dom-permissionstate-denied"></a></dfn>,
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha②">alpha</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to null.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta①">beta</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to null.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma①">gamma</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to null.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute">absolute</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to false.</p>
   <p>The static <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-requestpermission" id="ref-for-dom-deviceorientationevent-requestpermission">requestPermission()</a></code> operation, when invoked, must run these steps:</p>
   <ol>
    <li>
     <p>Let <var>promise</var> be a new promise. </p>
    <li>
     <p>Run these steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>: </p>
     <ol>
      <li>
       <p>Let <var>permission</var> be <a data-link-type="dfn" href="#permission" id="ref-for-permission">permission</a> for <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object">relevant settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin">origin</a>. </p>
      <li>
       <p>If <var>permission</var> is "<code>default</code>" and the method call was not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation" id="ref-for-triggered-by-user-activation">triggered by user activation</a>, then reject <var>promise</var> with a <code class="idl"><a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#notallowederror" id="ref-for-notallowederror">NotAllowedError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and abort these steps. </p>
      <li>
       <p>If <var>permission</var> is "<code>default</code>", ask the user whether sharing device orientation
   for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object①">relevant settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin①">origin</a> is acceptable. If it is, set <var>permission</var> to "<code>granted</code>", and "<code>denied</code>" otherwise. </p>
      <li>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to run these steps: </p>
       <ol>
        <li>
         <p>Set <a data-link-type="dfn" href="#permission" id="ref-for-permission①">permission</a> for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object②">relevant settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin②">origin</a> to <var>permission</var>. </p>
        <li>
         <p>Fulfill <var>promise</var> with <var>permission</var>. </p>
       </ol>
     </ol>
    <li>
     <p>Return <var>promise</var>. </p>
   </ol>
   <p>The event should fire whenever a significant change in orientation occurs. The definition of a significant change in this context is left to the implementation, though a maximum threshold for change of one degree is recommended. Implementations may also fire the event if they have reason to believe that the page does not have sufficiently fresh data.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha③">alpha</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta②">beta</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma②">gamma</a></code> attributes of the event must specify the orientation of the device in terms of the transformation from a coordinate frame fixed on the Earth to a coordinate frame fixed in the device. The coordinate frames must be oriented as described below.</p>
   <p>The Earth coordinate frame is a 'East, North, Up' frame at the user’s location. It has the following 3 axes, where the ground plane is tangent to the spheriod of the World Geodetic System 1984 <a data-link-type="biblio" href="#biblio-wgs84">[WGS84]</a>, at the user’s location.</p>
   <ul>
    <li data-md>
     <p>East (X) is in the ground plane, perpendicular to the North axis and positive towards the East.</p>
    <li data-md>
     <p>North (Y) is in the ground plane and positive towards True North (towards the North Pole).</p>
    <li data-md>
     <p>Up (Z) is perpendicular to the ground plane and positive upwards.</p>
   </ul>
   <p>For a mobile device such as a phone or tablet, the device coordinate frame is defined relative to the screen in its standard orientation, typically portrait. This means that slide-out elements such as keyboards are not deployed, and swiveling elements such as displays are folded to their default position. If the orientation of the screen changes when the device is rotated or a slide-out keyboard is deployed, this does not affect the orientation of the coordinate frame relative to the device. Users wishing to detect these changes in screen orientation may be able to do so with the existing <code class="idl"><a data-link-type="idl" href="https://compat.spec.whatwg.org/#event-orientationchange" id="ref-for-event-orientationchange">orientationchange</a></code> event. For a laptop computer, the device coordinate frame is defined relative to the integrated keyboard.</p>
   <ul>
    <li data-md>
     <p>x is in the plane of the screen or keyboard and is positive towards the right hand side of the screen or keyboard.</p>
    <li data-md>
     <p>y is in the plane of the screen or keyboard and is positive towards the top of the screen or keyboard.</p>
    <li data-md>
     <p>z is perpendicular to the screen or keyboard, positive out of the screen or keyboard.</p>
   </ul>
   <p>The transformation from the Earth coordinate frame to the device coordinate frame must use the following system of rotations.</p>
   <p>Rotations must use the right-hand convention, such that positive rotation around an axis is clockwise when viewed along the positive direction of the axis. Starting with the two frames aligned, the rotations are applied in the following order:</p>
   <ol id="rotations">
    <li>
     <p>Rotate the device frame around its z axis by <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha④">alpha</a></code> degrees, with <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha⑤">alpha</a></code> in [0, 360).</p>
     <div>
       <img alt="start orientation" src="start.png"> 
      <div>Device in the initial position, with Earth (XYZ) and body (xyz) frames aligned.</div>
     </div>
     <div>
       <img alt="rotation about z axis" src="c-rotation.png"> 
      <div>Device rotated through angle alpha about z axis, with previous locations of x and y axes shown as x<sub>0</sub> and y<sub>0</sub>.</div>
     </div>
    <li>
     <p>Rotate the device frame around its x axis by <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta③">beta</a></code> degrees, with <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta④">beta</a></code> in [-180, 180).</p>
     <div>
       <img alt="rotation about x axis" src="a-rotation.png"> 
      <div>Device rotated through angle beta about new x axis, with previous locations of y and z axes shown as y<sub>0</sub> and z<sub>0</sub>.</div>
     </div>
    <li>
     <p>Rotate the device frame around its y axis by <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma③">gamma</a></code> degrees, with <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma④">gamma</a></code> in [-90, 90).</p>
     <div>
       <img alt="rotation about y axis" src="b-rotation.png"> 
      <div>Device rotated through angle gamma about new y axis, with previous locations of x and z axes shown as x<sub>0</sub> and z<sub>0</sub>.</div>
     </div>
   </ol>
   <p>Thus the angles <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha⑥">alpha</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta⑤">beta</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma⑤">gamma</a></code> form a set of intrinsic Tait-Bryan angles of type Z - X' - Y''. <a data-link-type="biblio" href="#biblio-eulerangles">[EULERANGLES]</a> Note that this choice of angles follows mathematical convention, but means that alpha is in the opposite sense to a compass heading. It also means that the angles do not match the roll-pitch-yaw convention used in vehicle dynamics.</p>
   <p>The <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation④">deviceorientation</a> event tries to provide relative values for the three angles (relative to some arbitrary orientation), based on just the accelerometer and the gyroscope. The implementation can still decide to provide absolute orientation if relative is not available or the resulting data is more accurate. In either case, the <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute①">absolute</a></code> property must be set accordingly to reflect the choice.</p>
   <p>Implementations that are unable to provide all three angles must set the values of the unknown angles to null. If any angles are provided, the <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute②">absolute</a></code> property must be set appropriately. If an implementation can never provide orientation information, the event should be fired with the <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha⑦">alpha</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta⑥">beta</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma⑥">gamma</a></code> attributes set to null.</p>
   <h3 class="heading settled" data-level="4.2" id="deviceorientationabsolute"><span class="secno">4.2. </span><span class="content">deviceorientationabsolute Event</span><a class="self-link" href="#deviceorientationabsolute"></a></h3>
   <div class="issue" id="issue-58b60688"><a class="self-link" href="#issue-58b60688"></a> The <a data-link-type="dfn" href="#def-deviceorientationabsolute" id="ref-for-def-deviceorientationabsolute">deviceorientationabsolute</a> event and its <code class="idl"><a data-link-type="idl" href="#dom-window-ondeviceorientationabsolute" id="ref-for-dom-window-ondeviceorientationabsolute">ondeviceorientationabsolute</a></code> event handler IDL attribute have <a href="https://wpt.fyi/results/orientation-event/ondeviceorientationabsolute.https.html">limited implementation experience</a>. </div>
   <p>User agents implementing this specification must provide a new DOM event, named <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="def-deviceorientationabsolute"><code>deviceorientationabsolute</code></dfn>. The corresponding event must be of type <code class="idl"><a data-link-type="idl" href="#deviceorientationevent" id="ref-for-deviceorientationevent①">DeviceOrientationEvent</a></code> and must fire on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window②">window</a></code> object. Registration for, and firing of the <a data-link-type="dfn" href="#def-deviceorientationabsolute" id="ref-for-def-deviceorientationabsolute①">deviceorientationabsolute</a> event must follow the usual behavior of DOM4 Events, <a data-link-type="biblio" href="#biblio-dom4">[DOM4]</a>.</p>
   <p>User agents must also provide an event handler IDL attribute <a data-link-type="biblio" href="#biblio-html">[HTML]</a> named <code class="idl"><a data-link-type="idl" href="#dom-window-ondeviceorientationabsolute" id="ref-for-dom-window-ondeviceorientationabsolute①">ondeviceorientationabsolute</a></code> on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window③">window</a></code> object. The type of the corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type①">event handler event type</a> must be <a data-link-type="dfn" href="#def-deviceorientationabsolute" id="ref-for-def-deviceorientationabsolute②">deviceorientationabsolute</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①"><c- g>Window</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②"><c- g>SecureContext</c-></a>] <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-ondeviceorientationabsolute"><code><c- g>ondeviceorientationabsolute</c-></code></dfn>;
};
</pre>
   <p>The <a data-link-type="dfn" href="#def-deviceorientationabsolute" id="ref-for-def-deviceorientationabsolute③">deviceorientationabsolute</a> event is completely analogous to the <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation⑤">deviceorientation</a> event, except additional sensors like the magnetometer can be used to provide an absolute orientation. The <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute③">absolute</a></code> property must be set to true. If an implementation can never provide absolute orientation information, the event should be fired with the <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha⑧">alpha</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta⑦">beta</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma⑦">gamma</a></code> attributes set to null.</p>
   <h3 class="heading settled" data-level="4.3" id="compassneedscalibration"><span class="secno">4.3. </span><span class="content">compassneedscalibration Event</span><a class="self-link" href="#compassneedscalibration"></a></h3>
   <div class="issue" id="issue-d45eac76"><a class="self-link" href="#issue-d45eac76"></a> The <a data-link-type="dfn" href="#def-compassneedscalibration" id="ref-for-def-compassneedscalibration①">compassneedscalibration</a> event and its <code class="idl"><a data-link-type="idl" href="#dom-window-oncompassneedscalibration" id="ref-for-dom-window-oncompassneedscalibration">oncompassneedscalibration</a></code> event handler IDL attribute have <a href="https://github.com/w3c/deviceorientation/issues/38">limited implementation experience</a>. </div>
   <p>User agents implementing this specification must provide a new DOM event, named <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="def-compassneedscalibration"><code>compassneedscalibration</code></dfn> that uses the Event interface defined in the DOM4 Events specification <a data-link-type="biblio" href="#biblio-dom4">[DOM4]</a>. This event must fire on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window④">window</a></code> object. Registration for, and firing of the <a data-link-type="dfn" href="#def-compassneedscalibration" id="ref-for-def-compassneedscalibration②">compassneedscalibration</a> event must follow the usual behavior of DOM4 Events <a data-link-type="biblio" href="#biblio-dom4">[DOM4]</a>.</p>
   <p>User agents must also provide an event handler IDL attribute <a data-link-type="biblio" href="#biblio-html">[HTML]</a> named <code class="idl"><a data-link-type="idl" href="#dom-window-oncompassneedscalibration" id="ref-for-dom-window-oncompassneedscalibration①">oncompassneedscalibration</a></code> on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window⑤">window</a></code> object. The type of the corresponding event must be <a data-link-type="dfn" href="#def-compassneedscalibration" id="ref-for-def-compassneedscalibration③">compassneedscalibration</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②"><c- g>Window</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-oncompassneedscalibration"><code><c- g>oncompassneedscalibration</c-></code></dfn>;
};
</pre>
   <p>This event must be fired when the user agent determines that a compass used to obtain orientation data is in need of calibration. Furthermore, user agents should only fire the event if calibrating the compass will increase the accuracy of the data provided by the <a data-link-type="dfn" href="#def-deviceorientation" id="ref-for-def-deviceorientation⑥">deviceorientation</a> event.</p>
   <p>The default action of this event should be for the user agent to present the user with details of how to calibrate the compass. The event must be cancelable, so that web sites can provide their own alternative calibration UI.</p>
   <h3 class="heading settled" data-level="4.4" id="devicemotion"><span class="secno">4.4. </span><span class="content">devicemotion Event</span><a class="self-link" href="#devicemotion"></a></h3>
   <p>User agents implementing this specification must provide a new DOM event, named <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="def-devicemotion"><code>devicemotion</code></dfn>. The corresponding event must be of type <code class="idl"><a data-link-type="idl" href="#devicemotionevent" id="ref-for-devicemotionevent">DeviceMotionEvent</a></code> and must fire on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window⑥">window</a></code> object. Registration for, and firing of the <a data-link-type="dfn" href="#def-devicemotion" id="ref-for-def-devicemotion②">devicemotion</a> event must follow the usual behavior of DOM4 Events, <a data-link-type="biblio" href="#biblio-dom4">[DOM4]</a>.</p>
   <p>User agents must also provide an event handler IDL attribute [[!HTML] named <code class="idl"><a data-link-type="idl" href="#dom-window-ondevicemotion" id="ref-for-dom-window-ondevicemotion">ondevicemotion</a></code> on the <code class="idl"><a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window" id="ref-for-dom-window⑦">window</a></code> object. The type of the corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type②">event handler event type</a> must be <a data-link-type="dfn" href="#def-devicemotion" id="ref-for-def-devicemotion③">devicemotion</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window③"><c- g>Window</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext③"><c- g>SecureContext</c-></a>] <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-ondevicemotion"><code><c- g>ondevicemotion</c-></code></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext④"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="devicemotioneventacceleration"><code><c- g>DeviceMotionEventAcceleration</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a>? <dfn class="idl-code" data-dfn-for="DeviceMotionEventAcceleration" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-devicemotioneventacceleration-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-devicemotioneventacceleration-x"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦"><c- b>double</c-></a>? <dfn class="idl-code" data-dfn-for="DeviceMotionEventAcceleration" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-devicemotioneventacceleration-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-devicemotioneventacceleration-y"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧"><c- b>double</c-></a>? <dfn class="idl-code" data-dfn-for="DeviceMotionEventAcceleration" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-devicemotioneventacceleration-z"><code><c- g>z</c-></code><a class="self-link" href="#dom-devicemotioneventacceleration-z"></a></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑤"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="devicemotioneventrotationrate"><code><c- g>DeviceMotionEventRotationRate</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a>? <dfn class="idl-code" data-dfn-for="DeviceMotionEventRotationRate" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-devicemotioneventrotationrate-alpha"><code><c- g>alpha</c-></code><a class="self-link" href="#dom-devicemotioneventrotationrate-alpha"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪"><c- b>double</c-></a>? <dfn class="idl-code" data-dfn-for="DeviceMotionEventRotationRate" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-devicemotioneventrotationrate-beta"><code><c- g>beta</c-></code><a class="self-link" href="#dom-devicemotioneventrotationrate-beta"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceMotionEventRotationRate" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-devicemotioneventrotationrate-gamma"><code><c- g>gamma</c-></code></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑥"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="devicemotionevent"><code><c- g>DeviceMotionEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
    <dfn class="idl-code" data-dfn-for="DeviceMotionEvent" data-dfn-type="constructor" data-export data-lt="DeviceMotionEvent(type, eventInitDict)|constructor(type, eventInitDict)|DeviceMotionEvent(type)|constructor(type)" id="dom-devicemotionevent-devicemotionevent"><code><c- g>constructor</c-></code><a class="self-link" href="#dom-devicemotionevent-devicemotionevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="DeviceMotionEvent/DeviceMotionEvent(type, eventInitDict), DeviceMotionEvent/constructor(type, eventInitDict), DeviceMotionEvent/DeviceMotionEvent(type), DeviceMotionEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-devicemotionevent-devicemotionevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-devicemotionevent-devicemotionevent-type-eventinitdict-type"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventinit" id="ref-for-dictdef-devicemotioneventinit"><c- n>DeviceMotionEventInit</c-></a> <dfn class="idl-code" data-dfn-for="DeviceMotionEvent/DeviceMotionEvent(type, eventInitDict), DeviceMotionEvent/constructor(type, eventInitDict), DeviceMotionEvent/DeviceMotionEvent(type), DeviceMotionEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-devicemotionevent-devicemotionevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-devicemotionevent-devicemotionevent-type-eventinitdict-eventinitdict"></a></dfn> = {});
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#devicemotioneventacceleration" id="ref-for-devicemotioneventacceleration"><c- n>DeviceMotionEventAcceleration</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceMotionEvent" data-dfn-type="attribute" data-export data-readonly data-type="DeviceMotionEventAcceleration?" id="dom-devicemotionevent-acceleration"><code><c- g>acceleration</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#devicemotioneventacceleration" id="ref-for-devicemotioneventacceleration①"><c- n>DeviceMotionEventAcceleration</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceMotionEvent" data-dfn-type="attribute" data-export data-readonly data-type="DeviceMotionEventAcceleration?" id="dom-devicemotionevent-accelerationincludinggravity"><code><c- g>accelerationIncludingGravity</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#devicemotioneventrotationrate" id="ref-for-devicemotioneventrotationrate"><c- n>DeviceMotionEventRotationRate</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceMotionEvent" data-dfn-type="attribute" data-export data-readonly data-type="DeviceMotionEventRotationRate?" id="dom-devicemotionevent-rotationrate"><code><c- g>rotationRate</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceMotionEvent" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-devicemotionevent-interval"><code><c- g>interval</c-></code></dfn>;

    <c- b>static</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-permissionstate" id="ref-for-enumdef-permissionstate①"><c- n>PermissionState</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="DeviceMotionEvent" data-dfn-type="method" data-export data-lt="requestPermission()" id="dom-devicemotionevent-requestpermission"><code><c- g>requestPermission</c-></code></dfn>();
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-devicemotioneventaccelerationinit"><code><c- g>DeviceMotionEventAccelerationInit</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceMotionEventAccelerationInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-devicemotioneventaccelerationinit-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-devicemotioneventaccelerationinit-x"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①④"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceMotionEventAccelerationInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-devicemotioneventaccelerationinit-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-devicemotioneventaccelerationinit-y"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑤"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceMotionEventAccelerationInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-devicemotioneventaccelerationinit-z"><code><c- g>z</c-></code><a class="self-link" href="#dom-devicemotioneventaccelerationinit-z"></a></dfn> = <c- b>null</c->;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-devicemotioneventrotationrateinit"><code><c- g>DeviceMotionEventRotationRateInit</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑥"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceMotionEventRotationRateInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-devicemotioneventrotationrateinit-alpha"><code><c- g>alpha</c-></code><a class="self-link" href="#dom-devicemotioneventrotationrateinit-alpha"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑦"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceMotionEventRotationRateInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-devicemotioneventrotationrateinit-beta"><code><c- g>beta</c-></code><a class="self-link" href="#dom-devicemotioneventrotationrateinit-beta"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑧"><c- b>double</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="DeviceMotionEventRotationRateInit" data-dfn-type="dict-member" data-export data-type="double? " id="dom-devicemotioneventrotationrateinit-gamma"><code><c- g>gamma</c-></code><a class="self-link" href="#dom-devicemotioneventrotationrateinit-gamma"></a></dfn> = <c- b>null</c->;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-devicemotioneventinit"><code><c- g>DeviceMotionEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
    <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventaccelerationinit" id="ref-for-dictdef-devicemotioneventaccelerationinit"><c- n>DeviceMotionEventAccelerationInit</c-></a> <dfn class="idl-code" data-dfn-for="DeviceMotionEventInit" data-dfn-type="dict-member" data-export data-type="DeviceMotionEventAccelerationInit " id="dom-devicemotioneventinit-acceleration"><code><c- g>acceleration</c-></code><a class="self-link" href="#dom-devicemotioneventinit-acceleration"></a></dfn>;
    <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventaccelerationinit" id="ref-for-dictdef-devicemotioneventaccelerationinit①"><c- n>DeviceMotionEventAccelerationInit</c-></a> <dfn class="idl-code" data-dfn-for="DeviceMotionEventInit" data-dfn-type="dict-member" data-export data-type="DeviceMotionEventAccelerationInit " id="dom-devicemotioneventinit-accelerationincludinggravity"><code><c- g>accelerationIncludingGravity</c-></code><a class="self-link" href="#dom-devicemotioneventinit-accelerationincludinggravity"></a></dfn>;
    <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventrotationrateinit" id="ref-for-dictdef-devicemotioneventrotationrateinit"><c- n>DeviceMotionEventRotationRateInit</c-></a> <dfn class="idl-code" data-dfn-for="DeviceMotionEventInit" data-dfn-type="dict-member" data-export data-type="DeviceMotionEventRotationRateInit " id="dom-devicemotioneventinit-rotationrate"><code><c- g>rotationRate</c-></code><a class="self-link" href="#dom-devicemotioneventinit-rotationrate"></a></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑨"><c- b>double</c-></a> <dfn class="idl-code" data-default="0" data-dfn-for="DeviceMotionEventInit" data-dfn-type="dict-member" data-export data-type="double " id="dom-devicemotioneventinit-interval"><code><c- g>interval</c-></code><a class="self-link" href="#dom-devicemotioneventinit-interval"></a></dfn> = 0;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-acceleration" id="ref-for-dom-devicemotionevent-acceleration②">acceleration</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to null.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-accelerationincludinggravity" id="ref-for-dom-devicemotionevent-accelerationincludinggravity③">accelerationIncludingGravity</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to null.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-rotationrate" id="ref-for-dom-devicemotionevent-rotationrate①">rotationRate</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to null.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-interval" id="ref-for-dom-devicemotionevent-interval">interval</a></code> attribute must return the value it was initialized to. When the object is created, this attribute must be initialized to 0.</p>
   <p>The static <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-requestpermission" id="ref-for-dom-devicemotionevent-requestpermission">requestPermission()</a></code> operation, when invoked, must run these steps:</p>
   <ol>
    <li>
     <p>Let <var>promise</var> be a new promise. </p>
    <li>
     <p>Run these steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">in parallel</a>: </p>
     <ol>
      <li>
       <p>Let <var>permission</var> be <a data-link-type="dfn" href="#permission" id="ref-for-permission②">permission</a> for <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object③">relevant settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin③">origin</a>. </p>
      <li>
       <p>If <var>permission</var> is "<code>default</code>" and the method call was not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation" id="ref-for-triggered-by-user-activation①">triggered by user activation</a>, then reject <var>promise</var> with a <code class="idl"><a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#notallowederror" id="ref-for-notallowederror①">NotAllowedError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> and abort these steps. </p>
      <li>
       <p>If <var>permission</var> is "<code>default</code>", ask the user whether sharing device motion
   for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object④">relevant settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin④">origin</a> is acceptable. If it is, set <var>permission</var> to "<code>granted</code>", and "<code>denied</code>" otherwise. </p>
      <li>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> to run these steps: </p>
       <ol>
        <li>
         <p>Set <a data-link-type="dfn" href="#permission" id="ref-for-permission③">permission</a> for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object⑤">relevant settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin⑤">origin</a> to <var>permission</var>. </p>
        <li>
         <p>Fulfill <var>promise</var> with <var>permission</var>. </p>
       </ol>
     </ol>
    <li>
     <p>Return <var>promise</var>. </p>
   </ol>
   <p>In the <code class="idl"><a data-link-type="idl" href="#devicemotionevent" id="ref-for-devicemotionevent①">DeviceMotionEvent</a></code> events fired by the user agent, the following requirements must apply:</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-acceleration" id="ref-for-dom-devicemotionevent-acceleration③">acceleration</a></code> attribute must be initialized with the acceleration of the hosting device relative to the Earth frame, expressed in the body frame, as defined in <a href="#deviceorientation">deviceorientation Event</a> section. The acceleration must be expressed in meters per second squared (m/s2).</p>
   <p>Implementations that are unable to provide acceleration data without the effect of gravity (due, for example, to the lack of a gyroscope) may instead supply the acceleration including the effect of gravity. This is less useful in many applications but is provided as a means of providing best-effort support. In this case, the <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-accelerationincludinggravity" id="ref-for-dom-devicemotionevent-accelerationincludinggravity④">accelerationIncludingGravity</a></code> attribute must be initialized with the acceleration of the hosting device, plus an acceleration equal and opposite to the acceleration due to gravity. Again, the acceleration must be given in the body frame defined in <a href="#deviceorientation">deviceorientation Event</a> section and must be expressed in meters per second squared (m/s2).</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-rotationrate" id="ref-for-dom-devicemotionevent-rotationrate②">rotationRate</a></code> attribute must be initialized with the rate of rotation of the hosting device in space. It must be expressed as the rate of change of the angles defined as <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-alpha" id="ref-for-dom-deviceorientationevent-alpha⑨">alpha</a></code> (x axis), <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-beta" id="ref-for-dom-deviceorientationevent-beta⑧">beta</a></code> (y axis), <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-gamma" id="ref-for-dom-deviceorientationevent-gamma⑧">gamma</a></code> (z axis) and must be expressed in degrees per second (deg/s).</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-interval" id="ref-for-dom-devicemotionevent-interval①">interval</a></code> attribute must be initialized with the interval at which data is obtained from the underlying hardware and must be expressed in milliseconds (ms). It must be a constant, to simplify filtering of the data by the Web application.</p>
   <p>Implementations that are unable to provide all attributes must initialize the values of the unknown attributes to null. If an implementation can never provide motion information, the event should be fired with the <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-acceleration" id="ref-for-dom-devicemotionevent-acceleration④">acceleration</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-accelerationincludinggravity" id="ref-for-dom-devicemotionevent-accelerationincludinggravity⑤">accelerationIncludingGravity</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-devicemotionevent-rotationrate" id="ref-for-dom-devicemotionevent-rotationrate③">rotationRate</a></code> attributes set to null.</p>
   <h3 class="heading settled" data-level="4.5" id="id=permission-model"><span class="secno">4.5. </span><span class="content">Permission model</span><a class="self-link" href="#id=permission-model"></a></h3>
   <div class="issue" id="issue-53485653"><a class="self-link" href="#issue-53485653"></a>Further implementation experience is being gathered for the permission model and specification clarifications informed by this experience are being discussed in <a href="https://github.com/w3c/deviceorientation/issues/74">GitHub issue #74</a>.</div>
   <p>Implementations may choose to share device orientation &amp; motion only if the
user (or user agent on behalf of the user) has granted <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="permission">permission</dfn>.
The <a data-link-type="dfn" href="#permission" id="ref-for-permission④">permission</a> to share device orientation &amp; motion
for a given <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="ref-for-concept-origin">origin</a> is one of three strings: </p>
   <dl>
    <dt>"<code>default</code>" 
    <dd>
     <p>This is equivalent to "<code>denied</code>", but the user has made no
  explicit choice thus far. </p>
    <dt>"<code>denied</code>" 
    <dd>
     <p>This means the user does not want
  to share device orientation or motion. </p>
    <dt>"<code>granted</code>" 
    <dd>
     <p>This means device orientation or motion may be shared. </p>
   </dl>
   <p class="note" role="note">There is no equivalent to "<code>default</code>"
meaning "<code>granted</code>". In that case
"<code>granted</code>" is simply returned as there would be no reason
for the application to ask for <a data-link-type="dfn" href="#permission" id="ref-for-permission⑤">permission</a>. </p>
   <h2 class="heading settled" data-level="5" id="security-and-privacy"><span class="secno">5. </span><span class="content">Security and privacy considerations</span><a class="self-link" href="#security-and-privacy"></a></h2>
   <p>The API defined in this specification can be used to obtain information from hardware sensors, such as accelerometer, gyroscope and magnetometer. Provided data may be considered as sensitive and could become a subject of attack from malicious web pages. The main attack vectors can be categorized into following categories:</p>
   <ul>
    <li data-md>
     <p>Monitoring of a user input <a data-link-type="biblio" href="#biblio-touch">[TOUCH]</a></p>
    <li data-md>
     <p>Location tracking <a data-link-type="biblio" href="#biblio-indoorpos">[INDOORPOS]</a></p>
    <li data-md>
     <p>User identification <a data-link-type="biblio" href="#biblio-fingerprint">[FINGERPRINT]</a></p>
   </ul>
   <p>In light of that, implementations may consider permissions or visual indicators to signify the use of sensors by the web page. Furthermore, to minimize privacy risks, the chance of fingerprinting and other attacks the implementations must:</p>
   <ul>
    <li data-md>
     <p>fire events only when <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document">active document</a> is <a data-link-type="dfn" href="https://www.w3.org/TR/page-visibility-2/#dom-visibilitystate-visible" id="ref-for-dom-visibilitystate-visible">visible</a>,</p>
    <li data-md>
     <p>fire events only on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a> and same-origin <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context">nested browsing contexts</a>,</p>
    <li data-md>
     <p>fire events only on secure browsing contexts <a data-link-type="biblio" href="#biblio-secure-contexts">[SECURE-CONTEXTS]</a></p>
   </ul>
   <p>Additionally, implementing these items may also have a beneficial impact on the battery life of mobile devices.</p>
   <h2 class="heading settled" data-level="6" id="use-cases-and-requirements"><span class="secno">6. </span><span class="content">Use-Cases and Requirements</span><a class="self-link" href="#use-cases-and-requirements"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="use-cases"><span class="secno">6.1. </span><span class="content">Use-Cases</span><a class="self-link" href="#use-cases"></a></h3>
   <h4 class="no-toc heading settled" data-level="6.1.1" id="controlling-a-game"><span class="secno">6.1.1. </span><span class="content">Controlling a game</span><a class="self-link" href="#controlling-a-game"></a></h4>
   <p>A gaming Web application monitors the device’s orientation and interprets tilting in a certain direction as a means to control an on-screen sprite.</p>
   <h4 class="no-toc heading settled" data-level="6.1.2" id="gesture-recognition"><span class="secno">6.1.2. </span><span class="content">Gesture recognition</span><a class="self-link" href="#gesture-recognition"></a></h4>
   <p>A Web application monitors the device’s acceleration and applies signal processing in order to recognize certain specific gestures. For example, using a shaking gesture to clear a web form.</p>
   <h4 class="no-toc heading settled" data-level="6.1.3" id="mapping"><span class="secno">6.1.3. </span><span class="content">Mapping</span><a class="self-link" href="#mapping"></a></h4>
   <p>A mapping Web application uses the device’s orientation to correctly align the map with reality.</p>
   <h3 class="heading settled" data-level="6.2" id="requirements"><span class="secno">6.2. </span><span class="content">Requirements</span><a class="self-link" href="#requirements"></a></h3>
   <ul>
    <li data-md>
     <p>The specification must provide data that describes the physical orientation in space of the device.</p>
    <li data-md>
     <p>The specification must provide data that describes the motion in space of the device.</p>
    <li data-md>
     <p>The specification must allow Web applications to register for changes in the device’s orientation.</p>
    <li data-md>
     <p>The specification must be agnostic to the underlying sources of orientation and motion data.</p>
    <li data-md>
     <p>The specification must use the existing DOM event framework.</p>
   </ul>
   <h2 class="no-num heading settled" id="examples"><span class="content">A Examples</span><a class="self-link" href="#examples"></a></h2>
   <h3 class="heading settled" id="worked-example"><span class="content">A.1 Calculating compass heading</span><a class="self-link" href="#worked-example"></a></h3>
   <p><em>This section is non-normative.</em></p>
   <p>The following worked example is intended as an aid to users of the DeviceOrientation event.</p>
   <p><a href="#introduction">Introduction</a> section provided an example of using the DeviceOrientation event to obtain a compass heading when the device is held with the screen horizontal. This example shows how to determine the compass heading that the user is facing when holding the device with the screen approximately vertical in front of them. An application of this is an augmented-reality system.</p>
   <p>More precisely, we wish to determine the compass heading of the horizontal component of a vector which is orthogonal to the device’s screen and pointing out of the back of the screen.</p>
   <p>If v represents this vector in the rotated device body frame xyz, then v is as follows.</p>
   <object class="equation" data="equation1.xhtml" type="application/mathml+xml">
    <p><img alt="v = [0; 0; -1]" src="equation1.png"> </p>
   </object>
   <p>The transformation of v due to the rotation about the z axis can be represented by the following rotation matrix.</p>
   <object class="equation" data="equation2.xhtml" type="application/mathml+xml"> <img alt="Z = [cos(alpha) -sin(alpha) 0; sin(alpha) cos(alpha) 0; 0 0 1]" src="equation2.png"> </object>
   <p>The transformation of v due to the rotation about the x axis can be represented by the following rotation matrix.</p>
   <object class="equation" data="equation3.xhtml" type="application/mathml+xml"> <img alt="X = [1 0 0; 0 cos(beta) -sin(beta); 0 sin(beta) cos(beta)]" src="equation3.png"> </object>
   <p>The transformation of v due to the rotation about the y axis can be represented by the following rotation matrix.</p>
   <object class="equation" data="equation4.xhtml" type="application/mathml+xml"> <img alt="Y = [cos(gamma) 0 sin(gamma); 0 1 0; -sin(gamma) 0 cos(gamma)]" src="equation4.png"> </object>
   <p>If R represents the full rotation matrix of the device in the earth frame XYZ, then since the initial body frame is aligned with the earth, R is as follows.</p>
   <object class="equation" data="equation13a.xhtml" type="application/mathml+xml"> <img alt="R = ZXY = [[cos(alpha) cos(gamma)-sin(alpha) sin(beta) sin(gamma), -cos(beta) sin(alpha), cos(gamma) sin(alpha) sin(beta)+cos(alpha) sin(gamma)], [cos(gamma) sin(alpha)+cos(alpha) sin(beta) sin(gamma), cos(alpha) cos(beta), sin(alpha) sin(gamma)-cos(alpha) cos(gamma) sin(beta)], [-cos(beta) sin(gamma), sin(beta), cos(beta) cos(gamma)]]" src="equation13a.png"> </object>
   <p>If v' represents the vector v in the earth frame XYZ, then since the initial body frame is aligned with the earth, v' is as follows.</p>
   <object class="equation" data="equation5a.xhtml" type="application/mathml+xml"> <img alt="v&apos; = Rv" src="equation5a.png"> </object>
   <object class="equation" data="equation5e.xhtml" type="application/mathml+xml"> <img alt="v&apos; = [-cos(alpha)sin(gamma)-sin(alpha)sin(beta)cos(gamma); -sin(alpha)sin(gamma)+cos(alpha)sin(beta)cos(gamma); -cos(beta)cos(gamma)]" src="equation5e.png"> </object>
   <p>The compass heading θ is given by</p>
   <object class="equation" data="equation6.xhtml" type="application/mathml+xml"> <img alt="theta = atan((v’_x)/(v’_y)) = atan((-cos(alpha)sin(gamma)-sin(alpha)sin(beta)cos(gamma))/(-sin(alpha)sin(gamma)+cos(alpha)sin(beta)cos(gamma)))" src="equation6.png"> </object>
   <p>provided that β and γ are not both zero.</p>
   <div class="example" id="example-cad08fa0">
    <a class="self-link" href="#example-cad08fa0"></a> 
    <p>The compass heading calculation above can be represented in JavaScript as follows to return the correct compass heading when the provided parameters are defined, not null and represent <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute④">absolute</a></code> values.</p>
<pre class="lang-js highlight"><c- a>var</c-> degtorad <c- o>=</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>180</c-><c- p>;</c-> <c- c1>// Degree-to-Radian conversion</c->

<c- a>function</c-> compassHeading<c- p>(</c-> alpha<c- p>,</c-> beta<c- p>,</c-> gamma <c- p>)</c-> <c- p>{</c->

  <c- a>var</c-> _x <c- o>=</c-> beta  <c- o>?</c-> beta  <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// beta value</c->
  <c- a>var</c-> _y <c- o>=</c-> gamma <c- o>?</c-> gamma <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// gamma value</c->
  <c- a>var</c-> _z <c- o>=</c-> alpha <c- o>?</c-> alpha <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// alpha value</c->

  <c- a>var</c-> cX <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _x <c- p>);</c->
  <c- a>var</c-> cY <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _y <c- p>);</c->
  <c- a>var</c-> cZ <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _z <c- p>);</c->
  <c- a>var</c-> sX <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _x <c- p>);</c->
  <c- a>var</c-> sY <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _y <c- p>);</c->
  <c- a>var</c-> sZ <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _z <c- p>);</c->

  <c- c1>// Calculate Vx and Vy components</c->
  <c- a>var</c-> Vx <c- o>=</c-> <c- o>-</c-> cZ <c- o>*</c-> sY <c- o>-</c-> sZ <c- o>*</c-> sX <c- o>*</c-> cY<c- p>;</c->
  <c- a>var</c-> Vy <c- o>=</c-> <c- o>-</c-> sZ <c- o>*</c-> sY <c- o>+</c-> cZ <c- o>*</c-> sX <c- o>*</c-> cY<c- p>;</c->

  <c- c1>// Calculate compass heading</c->
  <c- a>var</c-> compassHeading <c- o>=</c-> Math<c- p>.</c->atan<c- p>(</c-> Vx <c- o>/</c-> Vy <c- p>);</c->

  <c- c1>// Convert compass heading to use whole unit circle</c->
  <c- k>if</c-><c- p>(</c-> Vy <c- o>&lt;</c-> <c- mi>0</c-> <c- p>)</c-> <c- p>{</c->
    compassHeading <c- o>+=</c-> Math<c- p>.</c->PI<c- p>;</c->
  <c- p>}</c-> <c- k>else</c-> <c- k>if</c-><c- p>(</c-> Vx <c- o>&lt;</c-> <c- mi>0</c-> <c- p>)</c-> <c- p>{</c->
    compassHeading <c- o>+=</c-> <c- mi>2</c-> <c- o>*</c-> Math<c- p>.</c->PI<c- p>;</c->
  <c- p>}</c->

  <c- k>return</c-> compassHeading <c- o>*</c-> <c- p>(</c-> <c- mi>180</c-> <c- o>/</c-> Math<c- p>.</c->PI <c- p>);</c-> <c- c1>// Compass Heading (in degrees)</c->

<c- p>}</c->
</pre>
   </div>
   <p>As a consistency check, if we set γ = 0, then</p>
   <object class="equation" data="equation7.xhtml" type="application/mathml+xml"> <img alt="theta = atan(-sin(alpha)sin(beta)/cos(alpha)sin(beta)) = -alpha" src="equation7.png"> </object>
   <p>as expected.</p>
   <p>Alternatively, if we set β = 90, then</p>
   <object class="equation" data="equation8a.xhtml" type="application/mathml+xml"> <img alt="theta = atan((-cos(alpha)sin(gamma)-sin(alpha)cos(gamma))/(-sin(alpha)sin(gamma)+cos(alpha)cos(gamma)))" src="equation8a.png"> </object>
   <object class="equation" data="equation8b.xhtml" type="application/mathml+xml"> <img alt="theta = atan(-sin(alpha+gamma)/cos(alpha+gamma)) = -(alpha+gamma)" src="equation8b.png"> </object>
   <p>as expected.</p>
   <h3 class="heading settled" id="worked-example-2"><span class="content">A.2 Alternate device orientation representations</span><a class="self-link" href="#worked-example-2"></a></h3>
   <p><em>This section is non-normative.</em></p>
   <p>Describing orientation using Tait-Bryan angles can have some disadvantages such as introducing gimbal lock <a data-link-type="biblio" href="#biblio-gimballock">[GIMBALLOCK]</a>. Depending on the intended application it can be useful to convert the Device Orientation values to other rotation representations.</p>
   <p>The first alternate orientation representation uses rotation matrices. By combining the component rotation matrices provided in the <a href="#worked-example">worked example</a> above we can represent the orientation of the device body frame as a combined rotation matrix.</p>
   <p>If R represents the rotation matrix of the device in the earth frame XYZ, then since the initial body frame is aligned with the earth, R is as follows.</p>
   <object class="equation" data="equation13a.xhtml" type="application/mathml+xml"> <img alt="R = ZXY = [[cos(alpha) cos(gamma)-sin(alpha) sin(beta) sin(gamma), -cos(beta) sin(alpha), cos(gamma) sin(alpha) sin(beta)+cos(alpha) sin(gamma)], [cos(gamma) sin(alpha)+cos(alpha) sin(beta) sin(gamma), cos(alpha) cos(beta), sin(alpha) sin(gamma)-cos(alpha) cos(gamma) sin(beta)], [-cos(beta) sin(gamma), sin(beta), cos(beta) cos(gamma)]]" src="equation13a.png"> </object>
   <div class="example" id="example-76d62ad0">
    <a class="self-link" href="#example-76d62ad0"></a> The above combined rotation matrix can be represented in JavaScript as follows provided passed parameters are defined, not null and represent <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute⑤">absolute</a></code> values. 
<pre class="lang-js highlight"><c- a>var</c-> degtorad <c- o>=</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>180</c-><c- p>;</c-> <c- c1>// Degree-to-Radian conversion</c->

<c- a>function</c-> getRotationMatrix<c- p>(</c-> alpha<c- p>,</c-> beta<c- p>,</c-> gamma <c- p>)</c-> <c- p>{</c->

  <c- a>var</c-> _x <c- o>=</c-> beta  <c- o>?</c-> beta  <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// beta value</c->
  <c- a>var</c-> _y <c- o>=</c-> gamma <c- o>?</c-> gamma <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// gamma value</c->
  <c- a>var</c-> _z <c- o>=</c-> alpha <c- o>?</c-> alpha <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// alpha value</c->

  <c- a>var</c-> cX <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _x <c- p>);</c->
  <c- a>var</c-> cY <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _y <c- p>);</c->
  <c- a>var</c-> cZ <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _z <c- p>);</c->
  <c- a>var</c-> sX <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _x <c- p>);</c->
  <c- a>var</c-> sY <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _y <c- p>);</c->
  <c- a>var</c-> sZ <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _z <c- p>);</c->

  <c- c1>//</c->
  <c- c1>// ZXY rotation matrix construction.</c->
  <c- c1>//</c->

  <c- a>var</c-> m11 <c- o>=</c-> cZ <c- o>*</c-> cY <c- o>-</c-> sZ <c- o>*</c-> sX <c- o>*</c-> sY<c- p>;</c->
  <c- a>var</c-> m12 <c- o>=</c-> <c- o>-</c-> cX <c- o>*</c-> sZ<c- p>;</c->
  <c- a>var</c-> m13 <c- o>=</c-> cY <c- o>*</c-> sZ <c- o>*</c-> sX <c- o>+</c-> cZ <c- o>*</c-> sY<c- p>;</c->

  <c- a>var</c-> m21 <c- o>=</c-> cY <c- o>*</c-> sZ <c- o>+</c-> cZ <c- o>*</c-> sX <c- o>*</c-> sY<c- p>;</c->
  <c- a>var</c-> m22 <c- o>=</c-> cZ <c- o>*</c-> cX<c- p>;</c->
  <c- a>var</c-> m23 <c- o>=</c-> sZ <c- o>*</c-> sY <c- o>-</c-> cZ <c- o>*</c-> cY <c- o>*</c-> sX<c- p>;</c->

  <c- a>var</c-> m31 <c- o>=</c-> <c- o>-</c-> cX <c- o>*</c-> sY<c- p>;</c->
  <c- a>var</c-> m32 <c- o>=</c-> sX<c- p>;</c->
  <c- a>var</c-> m33 <c- o>=</c-> cX <c- o>*</c-> cY<c- p>;</c->

  <c- k>return</c-> <c- p>[</c->
    m11<c- p>,</c->    m12<c- p>,</c->    m13<c- p>,</c->
    m21<c- p>,</c->    m22<c- p>,</c->    m23<c- p>,</c->
    m31<c- p>,</c->    m32<c- p>,</c->    m33
  <c- p>];</c->

<c- p>};</c->
</pre>
   </div>
   <p>Another alternate representation of device orientation data is as Quaternions. <a data-link-type="biblio" href="#biblio-quaternions">[QUATERNIONS]</a></p>
   <p>If q represents the unit quaternion of the device in the earth frame XYZ, then since the initial body frame is aligned with the earth, q is as follows.</p>
   <object class="equation" data="equation14.xhtml" type="application/mathml+xml"> <img alt="q = [[q_w], [q_x], [q_y], [q_z]] = [[cos(beta)cos(gamma)cos(alpha) - sin(beta)sin(gamma)sin(alpha)], [sin(beta)cos(gamma)cos(alpha) - cos(beta)sin(gamma)sin(alpha)], [cos(beta)sin(gamma)cos(alpha) + sin(beta)cos(gamma)sin(alpha)], [cos(beta)cos(gamma)sin(alpha) + sin(beta)sin(gamma)cos(alpha)]]" src="equation14.png"> </object>
   <div class="example" id="example-8f884833">
    <a class="self-link" href="#example-8f884833"></a> The above quaternion can be represented in JavaScript as follows provided the passed parameters are defined, are <code class="idl"><a data-link-type="idl" href="#dom-deviceorientationevent-absolute" id="ref-for-dom-deviceorientationevent-absolute⑥">absolute</a></code> values and those parameters are not null. 
<pre class="lang-js highlight"><c- a>var</c-> degtorad <c- o>=</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>180</c-><c- p>;</c-> <c- c1>// Degree-to-Radian conversion</c->

<c- a>function</c-> getQuaternion<c- p>(</c-> alpha<c- p>,</c-> beta<c- p>,</c-> gamma <c- p>)</c-> <c- p>{</c->

  <c- a>var</c-> _x <c- o>=</c-> beta  <c- o>?</c-> beta  <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// beta value</c->
  <c- a>var</c-> _y <c- o>=</c-> gamma <c- o>?</c-> gamma <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// gamma value</c->
  <c- a>var</c-> _z <c- o>=</c-> alpha <c- o>?</c-> alpha <c- o>*</c-> degtorad <c- o>:</c-> <c- mi>0</c-><c- p>;</c-> <c- c1>// alpha value</c->

  <c- a>var</c-> cX <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _x<c- o>/</c-><c- mi>2</c-> <c- p>);</c->
  <c- a>var</c-> cY <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _y<c- o>/</c-><c- mi>2</c-> <c- p>);</c->
  <c- a>var</c-> cZ <c- o>=</c-> Math<c- p>.</c->cos<c- p>(</c-> _z<c- o>/</c-><c- mi>2</c-> <c- p>);</c->
  <c- a>var</c-> sX <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _x<c- o>/</c-><c- mi>2</c-> <c- p>);</c->
  <c- a>var</c-> sY <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _y<c- o>/</c-><c- mi>2</c-> <c- p>);</c->
  <c- a>var</c-> sZ <c- o>=</c-> Math<c- p>.</c->sin<c- p>(</c-> _z<c- o>/</c-><c- mi>2</c-> <c- p>);</c->

  <c- c1>//</c->
  <c- c1>// ZXY quaternion construction.</c->
  <c- c1>//</c->

  <c- a>var</c-> w <c- o>=</c-> cX <c- o>*</c-> cY <c- o>*</c-> cZ <c- o>-</c-> sX <c- o>*</c-> sY <c- o>*</c-> sZ<c- p>;</c->
  <c- a>var</c-> x <c- o>=</c-> sX <c- o>*</c-> cY <c- o>*</c-> cZ <c- o>-</c-> cX <c- o>*</c-> sY <c- o>*</c-> sZ<c- p>;</c->
  <c- a>var</c-> y <c- o>=</c-> cX <c- o>*</c-> sY <c- o>*</c-> cZ <c- o>+</c-> sX <c- o>*</c-> cY <c- o>*</c-> sZ<c- p>;</c->
  <c- a>var</c-> z <c- o>=</c-> cX <c- o>*</c-> cY <c- o>*</c-> sZ <c- o>+</c-> sX <c- o>*</c-> sY <c- o>*</c-> cZ<c- p>;</c->

  <c- k>return</c-> <c- p>[</c-> w<c- p>,</c-> x<c- p>,</c-> y<c- p>,</c-> z <c- p>];</c->

<c- p>}</c->
</pre>
   </div>
   <p>We can check that a Unit Quaternion has been constructed correctly using Lagrange’s four-square theorem</p>
   <object class="equation" data="equation18.xhtml" type="application/mathml+xml"> <img alt="q_w^2 * q_x^2 * q_y^2 * q_z^2 = 1" src="equation18.png"> </object>
   <p>as expected.</p>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Lars Erik Bolstad, Dean Jackson, Claes Nilsson, George Percivall, Doug Turner, Matt Womer, Chris Dumez</p>
  </main>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li>
    absolute
    <ul>
     <li><a href="#dom-deviceorientationevent-absolute">attribute for DeviceOrientationEvent</a><span>, in §4.1</span>
     <li><a href="#dom-deviceorientationeventinit-absolute">dict-member for DeviceOrientationEventInit</a><span>, in §4.1</span>
    </ul>
   <li>
    acceleration
    <ul>
     <li><a href="#dom-devicemotionevent-acceleration">attribute for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventinit-acceleration">dict-member for DeviceMotionEventInit</a><span>, in §4.4</span>
    </ul>
   <li>
    accelerationIncludingGravity
    <ul>
     <li><a href="#dom-devicemotionevent-accelerationincludinggravity">attribute for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventinit-accelerationincludinggravity">dict-member for DeviceMotionEventInit</a><span>, in §4.4</span>
    </ul>
   <li>
    alpha
    <ul>
     <li><a href="#dom-devicemotioneventrotationrate-alpha">attribute for DeviceMotionEventRotationRate</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationevent-alpha">attribute for DeviceOrientationEvent</a><span>, in §4.1</span>
     <li><a href="#dom-devicemotioneventrotationrateinit-alpha">dict-member for DeviceMotionEventRotationRateInit</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationeventinit-alpha">dict-member for DeviceOrientationEventInit</a><span>, in §4.1</span>
    </ul>
   <li>
    beta
    <ul>
     <li><a href="#dom-devicemotioneventrotationrate-beta">attribute for DeviceMotionEventRotationRate</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationevent-beta">attribute for DeviceOrientationEvent</a><span>, in §4.1</span>
     <li><a href="#dom-devicemotioneventrotationrateinit-beta">dict-member for DeviceMotionEventRotationRateInit</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationeventinit-beta">dict-member for DeviceOrientationEventInit</a><span>, in §4.1</span>
    </ul>
   <li><a href="#def-compassneedscalibration">compassneedscalibration</a><span>, in §4.3</span>
   <li>
    constructor(type)
    <ul>
     <li><a href="#dom-devicemotionevent-devicemotionevent">constructor for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationevent-deviceorientationevent">constructor for DeviceOrientationEvent</a><span>, in §4.1</span>
    </ul>
   <li>
    constructor(type, eventInitDict)
    <ul>
     <li><a href="#dom-devicemotionevent-devicemotionevent">constructor for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationevent-deviceorientationevent">constructor for DeviceOrientationEvent</a><span>, in §4.1</span>
    </ul>
   <li><a href="#dom-permissionstate-denied">"denied"</a><span>, in §4.1</span>
   <li><a href="#def-devicemotion">devicemotion</a><span>, in §4.4</span>
   <li><a href="#devicemotionevent">DeviceMotionEvent</a><span>, in §4.4</span>
   <li><a href="#devicemotioneventacceleration">DeviceMotionEventAcceleration</a><span>, in §4.4</span>
   <li><a href="#dictdef-devicemotioneventaccelerationinit">DeviceMotionEventAccelerationInit</a><span>, in §4.4</span>
   <li><a href="#dictdef-devicemotioneventinit">DeviceMotionEventInit</a><span>, in §4.4</span>
   <li><a href="#devicemotioneventrotationrate">DeviceMotionEventRotationRate</a><span>, in §4.4</span>
   <li><a href="#dictdef-devicemotioneventrotationrateinit">DeviceMotionEventRotationRateInit</a><span>, in §4.4</span>
   <li><a href="#dom-devicemotionevent-devicemotionevent">DeviceMotionEvent(type)</a><span>, in §4.4</span>
   <li><a href="#dom-devicemotionevent-devicemotionevent">DeviceMotionEvent(type, eventInitDict)</a><span>, in §4.4</span>
   <li><a href="#def-deviceorientation">deviceorientation</a><span>, in §4.1</span>
   <li><a href="#def-deviceorientationabsolute">deviceorientationabsolute</a><span>, in §4.2</span>
   <li><a href="#deviceorientationevent">DeviceOrientationEvent</a><span>, in §4.1</span>
   <li><a href="#dictdef-deviceorientationeventinit">DeviceOrientationEventInit</a><span>, in §4.1</span>
   <li><a href="#dom-deviceorientationevent-deviceorientationevent">DeviceOrientationEvent(type)</a><span>, in §4.1</span>
   <li><a href="#dom-deviceorientationevent-deviceorientationevent">DeviceOrientationEvent(type, eventInitDict)</a><span>, in §4.1</span>
   <li>
    gamma
    <ul>
     <li><a href="#dom-devicemotioneventrotationrate-gamma">attribute for DeviceMotionEventRotationRate</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationevent-gamma">attribute for DeviceOrientationEvent</a><span>, in §4.1</span>
     <li><a href="#dom-devicemotioneventrotationrateinit-gamma">dict-member for DeviceMotionEventRotationRateInit</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationeventinit-gamma">dict-member for DeviceOrientationEventInit</a><span>, in §4.1</span>
    </ul>
   <li><a href="#dom-permissionstate-granted">"granted"</a><span>, in §4.1</span>
   <li>
    interval
    <ul>
     <li><a href="#dom-devicemotionevent-interval">attribute for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventinit-interval">dict-member for DeviceMotionEventInit</a><span>, in §4.4</span>
    </ul>
   <li><a href="#dom-window-oncompassneedscalibration">oncompassneedscalibration</a><span>, in §4.3</span>
   <li><a href="#dom-window-ondevicemotion">ondevicemotion</a><span>, in §4.4</span>
   <li><a href="#dom-window-ondeviceorientation">ondeviceorientation</a><span>, in §4.1</span>
   <li><a href="#dom-window-ondeviceorientationabsolute">ondeviceorientationabsolute</a><span>, in §4.2</span>
   <li><a href="#permission">permission</a><span>, in §4.5</span>
   <li><a href="#enumdef-permissionstate">PermissionState</a><span>, in §4.1</span>
   <li>
    requestPermission()
    <ul>
     <li><a href="#dom-devicemotionevent-requestpermission">method for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-deviceorientationevent-requestpermission">method for DeviceOrientationEvent</a><span>, in §4.1</span>
    </ul>
   <li>
    rotationRate
    <ul>
     <li><a href="#dom-devicemotionevent-rotationrate">attribute for DeviceMotionEvent</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventinit-rotationrate">dict-member for DeviceMotionEventInit</a><span>, in §4.4</span>
    </ul>
   <li>
    x
    <ul>
     <li><a href="#dom-devicemotioneventacceleration-x">attribute for DeviceMotionEventAcceleration</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventaccelerationinit-x">dict-member for DeviceMotionEventAccelerationInit</a><span>, in §4.4</span>
    </ul>
   <li>
    y
    <ul>
     <li><a href="#dom-devicemotioneventacceleration-y">attribute for DeviceMotionEventAcceleration</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventaccelerationinit-y">dict-member for DeviceMotionEventAccelerationInit</a><span>, in §4.4</span>
    </ul>
   <li>
    z
    <ul>
     <li><a href="#dom-devicemotioneventacceleration-z">attribute for DeviceMotionEventAcceleration</a><span>, in §4.4</span>
     <li><a href="#dom-devicemotioneventaccelerationinit-z">dict-member for DeviceMotionEventAccelerationInit</a><span>, in §4.4</span>
    </ul>
  </ul>
  <aside class="dfn-panel" data-for="term-for-event-orientationchange">
   <a href="https://compat.spec.whatwg.org/#event-orientationchange">https://compat.spec.whatwg.org/#event-orientationchange</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-orientationchange">4.1. deviceorientation Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-event①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-dictdef-eventinit①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-eventhandler①">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-eventhandler②">4.3. compassneedscalibration Event</a>
    <li><a href="#ref-for-eventhandler③">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-window①">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-window②">4.3. compassneedscalibration Event</a>
    <li><a href="#ref-for-window③">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-document">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#active-document">https://html.spec.whatwg.org/multipage/browsers.html#active-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-document">5. Security and privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-handler-event-type">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type">https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-handler-event-type">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-event-handler-event-type①">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-event-handler-event-type②">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-in-parallel①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-nested-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-nested-browsing-context">5. Security and privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-origin">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-origin">4.1. deviceorientation Event</a> <a href="#ref-for-concept-settings-object-origin①">(2)</a> <a href="#ref-for-concept-settings-object-origin②">(3)</a>
    <li><a href="#ref-for-concept-settings-object-origin③">4.4. devicemotion Event</a> <a href="#ref-for-concept-settings-object-origin④">(2)</a> <a href="#ref-for-concept-settings-object-origin⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-queue-a-task①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-browsing-context">5. Security and privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#dom-window">https://html.spec.whatwg.org/multipage/window-object.html#dom-window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window">4.1. deviceorientation Event</a> <a href="#ref-for-dom-window①">(2)</a>
    <li><a href="#ref-for-dom-window②">4.2. deviceorientationabsolute Event</a> <a href="#ref-for-dom-window③">(2)</a>
    <li><a href="#ref-for-dom-window④">4.3. compassneedscalibration Event</a> <a href="#ref-for-dom-window⑤">(2)</a>
    <li><a href="#ref-for-dom-window⑥">4.4. devicemotion Event</a> <a href="#ref-for-dom-window⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-visibilitystate-visible">
   <a href="https://www.w3.org/TR/page-visibility-2/#dom-visibilitystate-visible">https://www.w3.org/TR/page-visibility-2/#dom-visibilitystate-visible</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilitystate-visible">5. Security and privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-idl-DOMException①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-idl-DOMString①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-Exposed①">4.4. devicemotion Event</a> <a href="#ref-for-Exposed②">(2)</a> <a href="#ref-for-Exposed③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notallowederror">
   <a href="https://heycam.github.io/webidl/#notallowederror">https://heycam.github.io/webidl/#notallowederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notallowederror">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-notallowederror①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SecureContext">
   <a href="https://heycam.github.io/webidl/#SecureContext">https://heycam.github.io/webidl/#SecureContext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SecureContext">4.1. deviceorientation Event</a> <a href="#ref-for-SecureContext①">(2)</a>
    <li><a href="#ref-for-SecureContext②">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-SecureContext③">4.4. devicemotion Event</a> <a href="#ref-for-SecureContext④">(2)</a> <a href="#ref-for-SecureContext⑤">(3)</a> <a href="#ref-for-SecureContext⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">4.1. deviceorientation Event</a> <a href="#ref-for-idl-boolean①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">4.1. deviceorientation Event</a> <a href="#ref-for-idl-double①">(2)</a> <a href="#ref-for-idl-double②">(3)</a> <a href="#ref-for-idl-double③">(4)</a> <a href="#ref-for-idl-double④">(5)</a> <a href="#ref-for-idl-double⑤">(6)</a>
    <li><a href="#ref-for-idl-double⑥">4.4. devicemotion Event</a> <a href="#ref-for-idl-double⑦">(2)</a> <a href="#ref-for-idl-double⑧">(3)</a> <a href="#ref-for-idl-double⑨">(4)</a> <a href="#ref-for-idl-double①⓪">(5)</a> <a href="#ref-for-idl-double①①">(6)</a> <a href="#ref-for-idl-double①②">(7)</a> <a href="#ref-for-idl-double①③">(8)</a> <a href="#ref-for-idl-double①④">(9)</a> <a href="#ref-for-idl-double①⑤">(10)</a> <a href="#ref-for-idl-double①⑥">(11)</a> <a href="#ref-for-idl-double①⑦">(12)</a> <a href="#ref-for-idl-double①⑧">(13)</a> <a href="#ref-for-idl-double①⑨">(14)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[compatibility]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event-orientationchange" style="color:initial">orientationchange</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-active-document" style="color:initial">active document</span>
     <li><span class="dfn-paneled" id="term-for-event-handler-event-type" style="color:initial">event handler event type</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-nested-browsing-context" style="color:initial">nested browsing context</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-origin" style="color:initial">origin <small>(for environment settings object)</small></span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-top-level-browsing-context" style="color:initial">top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-dom-window" style="color:initial">window</span>
    </ul>
   <li>
    <a data-link-type="biblio">[page-visibility]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-visibilitystate-visible" style="color:initial">visible</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEBIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-notallowederror" style="color:initial">NotAllowedError</span>
     <li><span class="dfn-paneled" id="term-for-SecureContext" style="color:initial">SecureContext</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom4">[DOM4]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-page-visibility">[PAGE-VISIBILITY]
   <dd>Jatinder Mann; Arvind Jain. <a href="https://www.w3.org/TR/page-visibility/">Page Visibility (Second Edition)</a>. 29 October 2013. REC. URL: <a href="https://www.w3.org/TR/page-visibility/">https://www.w3.org/TR/page-visibility/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-secure-contexts">[SECURE-CONTEXTS]
   <dd>Mike West. <a href="https://www.w3.org/TR/secure-contexts/">Secure Contexts</a>. 15 September 2016. CR. URL: <a href="https://www.w3.org/TR/secure-contexts/">https://www.w3.org/TR/secure-contexts/</a>
   <dt id="biblio-webidl">[WEBIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-eulerangles">[EULERANGLES]
   <dd><a href="https://en.wikipedia.org/wiki/Euler_angles">Euler Angles</a>. URL: <a href="https://en.wikipedia.org/wiki/Euler_angles">https://en.wikipedia.org/wiki/Euler_angles</a>
   <dt id="biblio-fingerprint">[FINGERPRINT]
   <dd><a href="http://arxiv.org/abs/1408.1416">Mobile Device Identification via Sensor Fingerprinting</a>. 6 Aug 2014. URL: <a href="http://arxiv.org/abs/1408.1416">http://arxiv.org/abs/1408.1416</a>
   <dt id="biblio-gimballock">[GIMBALLOCK]
   <dd><a href="https://en.wikipedia.org/wiki/Gimbal_Lock">Gimbal Lock</a>. URL: <a href="https://en.wikipedia.org/wiki/Gimbal_Lock">https://en.wikipedia.org/wiki/Gimbal_Lock</a>
   <dt id="biblio-indoorpos">[INDOORPOS]
   <dd>Shala, Ubejd; Angel Rodriguez. <a href="http://www.diva-portal.org/smash/record.jsf?pid=diva2%3A475619&amp;dswid=9050">Indoor positioning using sensor-fusion in android devices</a>. 2011. URL: <a href="http://www.diva-portal.org/smash/record.jsf?pid=diva2%3A475619&amp;dswid=9050">http://www.diva-portal.org/smash/record.jsf?pid=diva2%3A475619&amp;dswid=9050</a>
   <dt id="biblio-quaternions">[QUATERNIONS]
   <dd><a href="https://en.wikipedia.org/wiki/Quaternion"> Quaternions</a>. URL: <a href="https://en.wikipedia.org/wiki/Quaternion">https://en.wikipedia.org/wiki/Quaternion</a>
   <dt id="biblio-touch">[TOUCH]
   <dd><a href="http://arxiv.org/abs/1602.04115">TouchSignatures: Identification of User Touch Actions and PINs Based on Mobile Sensor Data via JavaScript</a>. 12 Feb 2016. URL: <a href="http://arxiv.org/abs/1602.04115">http://arxiv.org/abs/1602.04115</a>
   <dt id="biblio-wgs84">[WGS84]
   <dd>National Imagery and Mapping Agency. <a href="http://earth-info.nga.mil/GandG/publications/tr8350.2/wgs84fin.pdf">Department of Defence World Geodetic System 1984</a>. 3 January 2000. Technical Report 8350.2, Third Edition. URL: <a href="http://earth-info.nga.mil/GandG/publications/tr8350.2/wgs84fin.pdf">http://earth-info.nga.mil/GandG/publications/tr8350.2/wgs84fin.pdf</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window④"><c- g>Window</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑦"><c- g>SecureContext</c-></a>] <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-ondeviceorientation"><code><c- g>ondeviceorientation</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①①"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#deviceorientationevent"><code><c- g>DeviceOrientationEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event②"><c- n>Event</c-></a> {
    <a href="#dom-deviceorientationevent-deviceorientationevent"><code><c- g>constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a href="#dom-deviceorientationevent-deviceorientationevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-deviceorientationeventinit" id="ref-for-dictdef-deviceorientationeventinit①"><c- n>DeviceOrientationEventInit</c-></a> <a href="#dom-deviceorientationevent-deviceorientationevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a> = {});
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⓪"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-deviceorientationevent-alpha"><code><c- g>alpha</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①⓪"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-deviceorientationevent-beta"><code><c- g>beta</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-deviceorientationevent-gamma"><code><c- g>gamma</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-deviceorientationevent-absolute"><code><c- g>absolute</c-></code></a>;

    <c- b>static</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-permissionstate" id="ref-for-enumdef-permissionstate②"><c- n>PermissionState</c-></a>> <a href="#dom-deviceorientationevent-requestpermission"><code><c- g>requestPermission</c-></code></a>();
};

<c- b>dictionary</c-> <a href="#dictdef-deviceorientationeventinit"><code><c- g>DeviceOrientationEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit②"><c- n>EventInit</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-deviceorientationeventinit-alpha"><code><c- g>alpha</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-deviceorientationeventinit-beta"><code><c- g>beta</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-deviceorientationeventinit-gamma"><code><c- g>gamma</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean " href="#dom-deviceorientationeventinit-absolute"><code><c- g>absolute</c-></code></a> = <c- b>false</c->;
};

<c- b>enum</c-> <a href="#enumdef-permissionstate"><code><c- g>PermissionState</c-></code></a> {
    <a href="#dom-permissionstate-granted"><code><c- s>"granted"</c-></code></a>,
    <a href="#dom-permissionstate-denied"><code><c- s>"denied"</c-></code></a>,
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①①"><c- g>Window</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②①"><c- g>SecureContext</c-></a>] <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-ondeviceorientationabsolute"><code><c- g>ondeviceorientationabsolute</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②①"><c- g>Window</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-oncompassneedscalibration"><code><c- g>oncompassneedscalibration</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window③①"><c- g>Window</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext③①"><c- g>SecureContext</c-></a>] <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-ondevicemotion"><code><c- g>ondevicemotion</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext④①"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#devicemotioneventacceleration"><code><c- g>DeviceMotionEventAcceleration</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-devicemotioneventacceleration-x"><code><c- g>x</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-devicemotioneventacceleration-y"><code><c- g>y</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-devicemotioneventacceleration-z"><code><c- g>z</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑤①"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#devicemotioneventrotationrate"><code><c- g>DeviceMotionEventRotationRate</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-devicemotioneventrotationrate-alpha"><code><c- g>alpha</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-devicemotioneventrotationrate-beta"><code><c- g>beta</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-devicemotioneventrotationrate-gamma"><code><c- g>gamma</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑥①"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#devicemotionevent"><code><c- g>DeviceMotionEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①①"><c- n>Event</c-></a> {
    <a href="#dom-devicemotionevent-devicemotionevent"><code><c- g>constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a href="#dom-devicemotionevent-devicemotionevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventinit" id="ref-for-dictdef-devicemotioneventinit①"><c- n>DeviceMotionEventInit</c-></a> <a href="#dom-devicemotionevent-devicemotionevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a> = {});
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#devicemotioneventacceleration" id="ref-for-devicemotioneventacceleration②"><c- n>DeviceMotionEventAcceleration</c-></a>? <a data-readonly data-type="DeviceMotionEventAcceleration?" href="#dom-devicemotionevent-acceleration"><code><c- g>acceleration</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#devicemotioneventacceleration" id="ref-for-devicemotioneventacceleration①①"><c- n>DeviceMotionEventAcceleration</c-></a>? <a data-readonly data-type="DeviceMotionEventAcceleration?" href="#dom-devicemotionevent-accelerationincludinggravity"><code><c- g>accelerationIncludingGravity</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#devicemotioneventrotationrate" id="ref-for-devicemotioneventrotationrate①"><c- n>DeviceMotionEventRotationRate</c-></a>? <a data-readonly data-type="DeviceMotionEventRotationRate?" href="#dom-devicemotionevent-rotationrate"><code><c- g>rotationRate</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-devicemotionevent-interval"><code><c- g>interval</c-></code></a>;

    <c- b>static</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-permissionstate" id="ref-for-enumdef-permissionstate①①"><c- n>PermissionState</c-></a>> <a href="#dom-devicemotionevent-requestpermission"><code><c- g>requestPermission</c-></code></a>();
};

<c- b>dictionary</c-> <a href="#dictdef-devicemotioneventaccelerationinit"><code><c- g>DeviceMotionEventAccelerationInit</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-devicemotioneventaccelerationinit-x"><code><c- g>x</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①④①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-devicemotioneventaccelerationinit-y"><code><c- g>y</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑤①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-devicemotioneventaccelerationinit-z"><code><c- g>z</c-></code></a> = <c- b>null</c->;
};

<c- b>dictionary</c-> <a href="#dictdef-devicemotioneventrotationrateinit"><code><c- g>DeviceMotionEventRotationRateInit</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑥①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-devicemotioneventrotationrateinit-alpha"><code><c- g>alpha</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑦①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-devicemotioneventrotationrateinit-beta"><code><c- g>beta</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑧①"><c- b>double</c-></a>? <a data-default="null" data-type="double? " href="#dom-devicemotioneventrotationrateinit-gamma"><code><c- g>gamma</c-></code></a> = <c- b>null</c->;
};

<c- b>dictionary</c-> <a href="#dictdef-devicemotioneventinit"><code><c- g>DeviceMotionEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①①"><c- n>EventInit</c-></a> {
    <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventaccelerationinit" id="ref-for-dictdef-devicemotioneventaccelerationinit②"><c- n>DeviceMotionEventAccelerationInit</c-></a> <a data-type="DeviceMotionEventAccelerationInit " href="#dom-devicemotioneventinit-acceleration"><code><c- g>acceleration</c-></code></a>;
    <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventaccelerationinit" id="ref-for-dictdef-devicemotioneventaccelerationinit①①"><c- n>DeviceMotionEventAccelerationInit</c-></a> <a data-type="DeviceMotionEventAccelerationInit " href="#dom-devicemotioneventinit-accelerationincludinggravity"><code><c- g>accelerationIncludingGravity</c-></code></a>;
    <a class="n" data-link-type="idl-name" href="#dictdef-devicemotioneventrotationrateinit" id="ref-for-dictdef-devicemotioneventrotationrateinit①"><c- n>DeviceMotionEventRotationRateInit</c-></a> <a data-type="DeviceMotionEventRotationRateInit " href="#dom-devicemotioneventinit-rotationrate"><code><c- g>rotationRate</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑨①"><c- b>double</c-></a> <a data-default="0" data-type="double " href="#dom-devicemotioneventinit-interval"><code><c- g>interval</c-></code></a> = 0;
};

</pre>
  <aside class="dfn-panel" data-for="def-deviceorientation">
   <b><a href="#def-deviceorientation">#def-deviceorientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-def-deviceorientation">2. Introduction</a> <a href="#ref-for-def-deviceorientation①">(2)</a>
    <li><a href="#ref-for-def-deviceorientation②">4.1. deviceorientation Event</a> <a href="#ref-for-def-deviceorientation③">(2)</a> <a href="#ref-for-def-deviceorientation④">(3)</a>
    <li><a href="#ref-for-def-deviceorientation⑤">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-def-deviceorientation⑥">4.3. compassneedscalibration Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-window-ondeviceorientation">
   <b><a href="#dom-window-ondeviceorientation">#dom-window-ondeviceorientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-ondeviceorientation">4.1. deviceorientation Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="deviceorientationevent">
   <b><a href="#deviceorientationevent">#deviceorientationevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deviceorientationevent">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-deviceorientationevent①">4.2. deviceorientationabsolute Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-deviceorientationevent-alpha">
   <b><a href="#dom-deviceorientationevent-alpha">#dom-deviceorientationevent-alpha</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-deviceorientationevent-alpha">2. Introduction</a> <a href="#ref-for-dom-deviceorientationevent-alpha①">(2)</a>
    <li><a href="#ref-for-dom-deviceorientationevent-alpha②">4.1. deviceorientation Event</a> <a href="#ref-for-dom-deviceorientationevent-alpha③">(2)</a> <a href="#ref-for-dom-deviceorientationevent-alpha④">(3)</a> <a href="#ref-for-dom-deviceorientationevent-alpha⑤">(4)</a> <a href="#ref-for-dom-deviceorientationevent-alpha⑥">(5)</a> <a href="#ref-for-dom-deviceorientationevent-alpha⑦">(6)</a>
    <li><a href="#ref-for-dom-deviceorientationevent-alpha⑧">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-dom-deviceorientationevent-alpha⑨">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-deviceorientationevent-beta">
   <b><a href="#dom-deviceorientationevent-beta">#dom-deviceorientationevent-beta</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-deviceorientationevent-beta">2. Introduction</a>
    <li><a href="#ref-for-dom-deviceorientationevent-beta①">4.1. deviceorientation Event</a> <a href="#ref-for-dom-deviceorientationevent-beta②">(2)</a> <a href="#ref-for-dom-deviceorientationevent-beta③">(3)</a> <a href="#ref-for-dom-deviceorientationevent-beta④">(4)</a> <a href="#ref-for-dom-deviceorientationevent-beta⑤">(5)</a> <a href="#ref-for-dom-deviceorientationevent-beta⑥">(6)</a>
    <li><a href="#ref-for-dom-deviceorientationevent-beta⑦">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-dom-deviceorientationevent-beta⑧">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-deviceorientationevent-gamma">
   <b><a href="#dom-deviceorientationevent-gamma">#dom-deviceorientationevent-gamma</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-deviceorientationevent-gamma">2. Introduction</a>
    <li><a href="#ref-for-dom-deviceorientationevent-gamma①">4.1. deviceorientation Event</a> <a href="#ref-for-dom-deviceorientationevent-gamma②">(2)</a> <a href="#ref-for-dom-deviceorientationevent-gamma③">(3)</a> <a href="#ref-for-dom-deviceorientationevent-gamma④">(4)</a> <a href="#ref-for-dom-deviceorientationevent-gamma⑤">(5)</a> <a href="#ref-for-dom-deviceorientationevent-gamma⑥">(6)</a>
    <li><a href="#ref-for-dom-deviceorientationevent-gamma⑦">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-dom-deviceorientationevent-gamma⑧">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-deviceorientationevent-absolute">
   <b><a href="#dom-deviceorientationevent-absolute">#dom-deviceorientationevent-absolute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-deviceorientationevent-absolute">4.1. deviceorientation Event</a> <a href="#ref-for-dom-deviceorientationevent-absolute①">(2)</a> <a href="#ref-for-dom-deviceorientationevent-absolute②">(3)</a>
    <li><a href="#ref-for-dom-deviceorientationevent-absolute③">4.2. deviceorientationabsolute Event</a>
    <li><a href="#ref-for-dom-deviceorientationevent-absolute④">A.1 Calculating compass heading</a>
    <li><a href="#ref-for-dom-deviceorientationevent-absolute⑤">A.2 Alternate device orientation representations</a> <a href="#ref-for-dom-deviceorientationevent-absolute⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-deviceorientationevent-requestpermission">
   <b><a href="#dom-deviceorientationevent-requestpermission">#dom-deviceorientationevent-requestpermission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-deviceorientationevent-requestpermission">4.1. deviceorientation Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-deviceorientationeventinit">
   <b><a href="#dictdef-deviceorientationeventinit">#dictdef-deviceorientationeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-deviceorientationeventinit">4.1. deviceorientation Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-permissionstate">
   <b><a href="#enumdef-permissionstate">#enumdef-permissionstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-permissionstate">4.1. deviceorientation Event</a>
    <li><a href="#ref-for-enumdef-permissionstate①">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="def-deviceorientationabsolute">
   <b><a href="#def-deviceorientationabsolute">#def-deviceorientationabsolute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-def-deviceorientationabsolute">4.2. deviceorientationabsolute Event</a> <a href="#ref-for-def-deviceorientationabsolute①">(2)</a> <a href="#ref-for-def-deviceorientationabsolute②">(3)</a> <a href="#ref-for-def-deviceorientationabsolute③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-window-ondeviceorientationabsolute">
   <b><a href="#dom-window-ondeviceorientationabsolute">#dom-window-ondeviceorientationabsolute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-ondeviceorientationabsolute">4.2. deviceorientationabsolute Event</a> <a href="#ref-for-dom-window-ondeviceorientationabsolute①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="def-compassneedscalibration">
   <b><a href="#def-compassneedscalibration">#def-compassneedscalibration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-def-compassneedscalibration">2. Introduction</a>
    <li><a href="#ref-for-def-compassneedscalibration①">4.3. compassneedscalibration Event</a> <a href="#ref-for-def-compassneedscalibration②">(2)</a> <a href="#ref-for-def-compassneedscalibration③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-window-oncompassneedscalibration">
   <b><a href="#dom-window-oncompassneedscalibration">#dom-window-oncompassneedscalibration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-oncompassneedscalibration">4.3. compassneedscalibration Event</a> <a href="#ref-for-dom-window-oncompassneedscalibration①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="def-devicemotion">
   <b><a href="#def-devicemotion">#def-devicemotion</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-def-devicemotion">2. Introduction</a> <a href="#ref-for-def-devicemotion①">(2)</a>
    <li><a href="#ref-for-def-devicemotion②">4.4. devicemotion Event</a> <a href="#ref-for-def-devicemotion③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-window-ondevicemotion">
   <b><a href="#dom-window-ondevicemotion">#dom-window-ondevicemotion</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-ondevicemotion">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="devicemotioneventacceleration">
   <b><a href="#devicemotioneventacceleration">#devicemotioneventacceleration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-devicemotioneventacceleration">4.4. devicemotion Event</a> <a href="#ref-for-devicemotioneventacceleration①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="devicemotioneventrotationrate">
   <b><a href="#devicemotioneventrotationrate">#devicemotioneventrotationrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-devicemotioneventrotationrate">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-devicemotioneventrotationrate-gamma">
   <b><a href="#dom-devicemotioneventrotationrate-gamma">#dom-devicemotioneventrotationrate-gamma</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-devicemotioneventrotationrate-gamma">2. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="devicemotionevent">
   <b><a href="#devicemotionevent">#devicemotionevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-devicemotionevent">4.4. devicemotion Event</a> <a href="#ref-for-devicemotionevent①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-devicemotionevent-acceleration">
   <b><a href="#dom-devicemotionevent-acceleration">#dom-devicemotionevent-acceleration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-devicemotionevent-acceleration">2. Introduction</a> <a href="#ref-for-dom-devicemotionevent-acceleration①">(2)</a>
    <li><a href="#ref-for-dom-devicemotionevent-acceleration②">4.4. devicemotion Event</a> <a href="#ref-for-dom-devicemotionevent-acceleration③">(2)</a> <a href="#ref-for-dom-devicemotionevent-acceleration④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-devicemotionevent-accelerationincludinggravity">
   <b><a href="#dom-devicemotionevent-accelerationincludinggravity">#dom-devicemotionevent-accelerationincludinggravity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-devicemotionevent-accelerationincludinggravity">2. Introduction</a> <a href="#ref-for-dom-devicemotionevent-accelerationincludinggravity①">(2)</a> <a href="#ref-for-dom-devicemotionevent-accelerationincludinggravity②">(3)</a>
    <li><a href="#ref-for-dom-devicemotionevent-accelerationincludinggravity③">4.4. devicemotion Event</a> <a href="#ref-for-dom-devicemotionevent-accelerationincludinggravity④">(2)</a> <a href="#ref-for-dom-devicemotionevent-accelerationincludinggravity⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-devicemotionevent-rotationrate">
   <b><a href="#dom-devicemotionevent-rotationrate">#dom-devicemotionevent-rotationrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-devicemotionevent-rotationrate">2. Introduction</a>
    <li><a href="#ref-for-dom-devicemotionevent-rotationrate①">4.4. devicemotion Event</a> <a href="#ref-for-dom-devicemotionevent-rotationrate②">(2)</a> <a href="#ref-for-dom-devicemotionevent-rotationrate③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-devicemotionevent-interval">
   <b><a href="#dom-devicemotionevent-interval">#dom-devicemotionevent-interval</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-devicemotionevent-interval">4.4. devicemotion Event</a> <a href="#ref-for-dom-devicemotionevent-interval①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-devicemotionevent-requestpermission">
   <b><a href="#dom-devicemotionevent-requestpermission">#dom-devicemotionevent-requestpermission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-devicemotionevent-requestpermission">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-devicemotioneventaccelerationinit">
   <b><a href="#dictdef-devicemotioneventaccelerationinit">#dictdef-devicemotioneventaccelerationinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-devicemotioneventaccelerationinit">4.4. devicemotion Event</a> <a href="#ref-for-dictdef-devicemotioneventaccelerationinit①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-devicemotioneventrotationrateinit">
   <b><a href="#dictdef-devicemotioneventrotationrateinit">#dictdef-devicemotioneventrotationrateinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-devicemotioneventrotationrateinit">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-devicemotioneventinit">
   <b><a href="#dictdef-devicemotioneventinit">#dictdef-devicemotioneventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-devicemotioneventinit">4.4. devicemotion Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="permission">
   <b><a href="#permission">#permission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-permission">4.1. deviceorientation Event</a> <a href="#ref-for-permission①">(2)</a>
    <li><a href="#ref-for-permission②">4.4. devicemotion Event</a> <a href="#ref-for-permission③">(2)</a>
    <li><a href="#ref-for-permission④">4.5. Permission model</a> <a href="#ref-for-permission⑤">(2)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>